<template>
  <div class="test">
    <el-button @click="handleClick">开打弹窗</el-button>
    <el-button @click="$router.push({ path: '/from' })">表格</el-button>
    <el-button @click="$router.push({ path: '/pindex' })">Mixin</el-button>
    <el-button @click="$router.push({ path: '/filters' })">filters</el-button>
    <el-button @click="$router.push({ path: '/API' })">API</el-button>
    <!-- <el-button @click="$router.push({ path: '/dIndex' })">H5可视化</el-button> -->
    <el-button @click="$router.push({ path: '/transition' })"
      >transition</el-button
    >
    <el-button @click="$router.push({ path: '/upload' })">上传</el-button>
    <el-button @click="$router.push({ path: '/avatarCropper' })"
      >图片裁剪</el-button
    >
    <el-button @click="$router.push({ path: '/download' })">下载</el-button>
    <el-button @click="$router.push({ path: '/webSocket' })"
      >webSocket</el-button
    >
    <!-- <el-button @click="$router.push({ path: '/chatRoom' })">聊天室</el-button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClick() {
      this.$modal({
        // 嵌套组件传递属性
        componentProps: {
          id: "asdasdsad",
        },

        // 弹窗内嵌套组件
        component: (resolve) => require(["./table-list"], resolve),

        // 弹窗属性设置
        props: {
          title: "基本信息弹窗",
        },

        // 事件回调
        methods: {
          refresh(e) {
            console.log("e", e);
          },
          //   refresh: (e) => {
          //     console.log(e);
          //   },
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.test {
  width: 1200px;
  padding-top: 20px;
  margin: 0 auto;
}
</style>
